<template>
<div class="search-popup">
    <form action="/">
        <van-search shape="round" v-model="searchVal" show-action :placeholder="placeVal" @search="onSearch" @cancel="onCancel" @input="onInput" />
    </form>
    <HistoryHot v-if="blockShow==1" :historyKeywordList="historyKeywordList" :hotKeywordList="hotKeywordList" @tagClick="tagClick"/>
    <SearchTipsList @cellClick="tagClick" v-else-if="blockShow==2" :searchTipsList="searchTipsList"></SearchTipsList>
    <SearchProducts @categoryChange="categoryChange" @priceChange="priceChange" v-else :productsList="productsList" :filterCategory="filterCategory"></SearchProducts>
</div>
</template>

<script>
import HistoryHot from '../../components/HistoryHot.vue'
import SearchTipsList from '../../components/SearchTipsList.vue'
import SearchProducts from '../../components/SearchProducts.vue'
export default {
    components: {
        HistoryHot,
        SearchTipsList,
        SearchProducts
    },
    data() {
        return {
            searchVal: '',
            placeVal: '',
            blockShow: 1,
            historyKeywordList: [],
            hotKeywordList: [],
            searchTipsList: [],
            productsList: [],
            filterCategory: [],
            order:'desc',
            categoryId:0,
            sort:'id'
        };
    },
    async created() {
        const res = await this.$http.get('search/index')
        const {
            defaultKeyword,
            historyKeywordList,
            hotKeywordList
        } = res.data.data
        if (res.data.errno == 0) {
            this.placeVal = defaultKeyword.keyword
            this.historyKeywordList = historyKeywordList
            this.hotKeywordList = hotKeywordList
        }
    },
    methods: {
        tagClick(val){
            this.searchVal = val
            this.onSearch(val)
        },
        priceChange(val){
            this.order = val
            this.sort = 'price'
            this.onSearch(this.searchVal)
        },
        categoryChange(val) {
            this.categoryId = val
            this.onSearch(this.searchVal)
        },
        async onSearch(val) {
            this.blockShow = 3
            const res = await this.$http.get('goods/list', {
                params: {
                    keyword: val,
                    page: 1,
                    size: 10,
                    order: this.order,
                    categoryId: this.categoryId,
                    sort: this.sort
                }
            })
            if (res.data.errno == 0) {
                const {
                    data,
                    filterCategory
                } = res.data.data
                this.productsList = data
                const newArr = JSON.parse(JSON.stringify(filterCategory).replace(/name/g, 'text').replace(/id/g, 'value'))
                this.filterCategory = newArr
            }
        },
        onCancel() {
            this.$router.go(-1)
        },
        async onInput(val) {
            const res = await this.$http.get('search/helper', {
                params: {
                    keyword: val
                }
            })
            this.searchTipsList = res.data.data
            this.blockShow = 2
        }
    },
}
</script>

<style scoped>
.search-popup {
    width: 100%;
    height: 100%;
    background-color: #efefef;
    position: absolute;
    top: 0;
}
</style>
